<?php
/**
 * @author Di Zhang <zhangdi_me@163.com>
 */


use yii\helpers\Html;
use yiizh\fontawesome\Asset;
use yiizh\fontawesome\Icon;

Asset::register($this);

$this->title = $this->context->navTitle;
$this->params['keywords'] = 'Font Awesome, 扩展,Yii 框架, 如何在Yii 2中使用 Font Awesome';
$this->params['description'] = 'Yii 框架 Font Awesome 扩展';
?>
<div class="extension">
    <div id="overview">
        Yii 框架 <?= Html::a('Font Awesome', 'http://fontawesome.io/') ?> 扩展。
    </div>
    <h2 id="project">项目</h2>

    <h3>git@oschina.net</h3>

    <p>
        <?= Html::a('http://git.oschina.net/yiizh.com/yii2-font-awesome',
            'http://git.oschina.net/yiizh.com/yii2-font-awesome', ['target' => '_blank']) ?><br>
    </p>

    <p>
        <script src='https://git.oschina.net/yiizh.com/yii2-font-awesome/widget_preview'></script>
    </p>
    <h3>Github</h3>

    <p>
        <?= Html::a('https://github.com/yiizh/yii2-font-awesome',
            'https://github.com/yiizh/yii2-font-awesome', ['target' => '_blank']) ?>
    </p>

    <p>

    <div class="github-widget" data-repo="yiizh/yii2-font-awesome"></div>
    </p>
    <h2 id="install">
        安装
    </h2>

    <p>
        推荐使用 Composer 安装。
    </p>

    <h3>Via Composer</h3>
    <pre>composer require "yiizh/yii2-font-awesome *"</pre>
    <p>
        或者在你的 <code>composer.json</code> 文件中添加
    <pre>"yiizh/yii2-font-awesome": "*",</pre>
    </p>
    <h2 id="usage">
        用法
    </h2>

    <p>
        在<code>view</code>视图文件中
<pre>&lt;?php
use yiizh\fontawesome\Asset;
use yiizh\fontawesome\Icon;

Asset::register($this);
?&gt;
...
&lt;?=Icon::i("home");&gt;
</pre>
    </p>
    <h2 id="examples">
        示例
    </h2>

    <h3>基础图标</h3>

    <div class="row">
        <div class="col-lg-4">
            <p>
                <?= Icon::i('camera-retro') ?> fa-camera-retro
            </p>
        </div>
        <div class="col-lg-8">
        <pre><?= Html::encode(<<<CODE
<?= Icon::i('camera-retro') ?> fa-camera-retro
CODE
            ) ?></pre>
        </div>
    </div>

    <h3>大图标</h3>

    <div class="row">
        <div class="col-lg-4">
            <p>
                <?= Icon::i('camera-retro lg') ?> fa-lg
            </p>

            <p>
                <?= Icon::i('camera-retro 2x') ?> fa-2x
            </p>

            <p>
                <?= Icon::i('camera-retro 3x') ?> fa-3x
            </p>

            <p>
                <?= Icon::i('camera-retro 4x') ?> fa-4x
            </p>

            <p>
                <?= Icon::i('camera-retro 5x') ?> fa-5x
            </p>
        </div>
        <div class="col-lg-8">
        <pre><?= Html::encode(<<<CODE
<?= Icon::i('camera-retro lg') ?> fa-lg
<?= Icon::i('camera-retro 2x') ?> fa-2x
<?= Icon::i('camera-retro 3x') ?> fa-3x
<?= Icon::i('camera-retro 4x') ?> fa-4x
<?= Icon::i('camera-retro 5x') ?> fa-5x
CODE
            ) ?></pre>
        </div>
    </div>

    <h3>固定宽度的图标</h3>

    <div class="row">
        <div class="col-lg-4">
            <div class="list-group">
                <a class="list-group-item" href="#"><?= Icon::i('home fw') ?>&nbsp;Home</a>
                <a class="list-group-item" href="#"><?= Icon::i('book fw') ?>&nbsp;Library</a>
                <a class="list-group-item" href="#"><?= Icon::i('pencil fw') ?>&nbsp;Applications</a>
                <a class="list-group-item" href="#"><?= Icon::i('cog fw') ?>&nbsp;Settings</a>
            </div>
        </div>
        <div class="col-lg-8">
        <pre><?= Html::encode(<<<CODE
<div class="list-group">
    <a class="list-group-item" href="#"><?= Icon::i('home fw') ?>&nbsp;Home</a>
    <a class="list-group-item" href="#"><?= Icon::i('book fw') ?>&nbsp;Library</a>
    <a class="list-group-item" href="#"><?= Icon::i('pencil fw') ?>&nbsp;Applications</a>
    <a class="list-group-item" href="#"><?= Icon::i('cog fw') ?>&nbsp;Settings</a>
</div>
CODE
            ) ?></pre>
        </div>
    </div>

    <h3>列表图标</h3>

    <div class="row">
        <div class="col-lg-4">
            <ul class="fa-ul">
                <li><?= Icon::i('li check-square') ?>List icons</li>
                <li><?= Icon::i('li check-square') ?>can be used</li>
                <li><?= Icon::i('li spinner spin') ?>as bullets</li>
                <li><?= Icon::i('li square') ?>in lists</li>
            </ul>
        </div>
        <div class="col-lg-8">
        <pre><?= Html::encode(<<<CODE
<ul class="fa-ul">
    <li><?= Icon::i('li check-square') ?>List icons</li>
    <li><?= Icon::i('li check-square') ?>can be used</li>
    <li><?= Icon::i('li spinner spin') ?>as bullets</li>
    <li><?= Icon::i('li square') ?>in lists</li>
</ul>
CODE
            ) ?></pre>
        </div>
    </div>
    <h3>带边框和浮动图标</h3>

    <div class="row">
        <div class="col-lg-4">
            <?= Icon::i('quote-left 3x border', ['class' => 'pull-left']) ?>
            ...tomorrow we will run faster, stretch out our arms farther...
            And then one fine morning— So we beat on, boats against the
            current, borne back ceaselessly into the past.
        </div>
        <div class="col-lg-8">
        <pre><?= Html::encode(<<<CODE
<?= Icon::i('quote-left 3x border', ['class' => 'pull-left']) ?>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
CODE
            ) ?></pre>
        </div>
    </div>

    <h3>旋转图标</h3>

    <div class="row">
        <div class="col-lg-4">
            <?= Icon::i('spin spinner') ?><br>
            <?= Icon::i('spin circle-o-notch') ?><br>
            <?= Icon::i('spin refresh') ?><br>
            <?= Icon::i('spin cog') ?>
        </div>
        <div class="col-lg-8">
        <pre><?= Html::encode(<<<CODE
<?= Icon::i('spin spinner') ?><br>
<?= Icon::i('spin circle-o-notch') ?><br>
<?= Icon::i('spin refresh') ?><br>
<?= Icon::i('spin cog') ?>
CODE
            ) ?></pre>
        </div>
    </div>

    <h3>旋转和翻转图标</h3>

    <div class="row">
        <div class="col-lg-4">
            <?= Icon::i('shield') ?> normal<br>
            <?= Icon::i('shield rotate-90') ?> fa-rotate-90<br>
            <?= Icon::i('shield rotate-180') ?> fa-rotate-180<br>
            <?= Icon::i('shield rotate-270') ?> fa-rotate-270<br>
            <?= Icon::i('shield flip-horizontal') ?> fa-flip-horizontal<br>
            <?= Icon::i('shield flip-vertical') ?> icon-flip-vertical
        </div>
        <div class="col-lg-8">
        <pre><?= Html::encode(<<<CODE
<?= Icon::i('shield') ?> normal<br>
<?= Icon::i('shield rotate-90') ?> fa-rotate-90<br>
<?= Icon::i('shield rotate-180') ?> fa-rotate-180<br>
<?= Icon::i('shield rotate-270') ?> fa-rotate-270<br>
<?= Icon::i('shield flip-horizontal') ?> fa-flip-horizontal<br>
<?= Icon::i('shield flip-vertical') ?> icon-flip-vertical
CODE
            ) ?></pre>
        </div>
    </div>

    <h3>堆叠图标</h3>

    <div class="row">
        <div class="col-lg-4">
        <span class="fa-stack fa-lg">
          <?= Icon::i('square-o stack-2x') ?>
          <?= Icon::i('twitter stack-1x') ?>
        </span>
            fa-twitter on fa-square-o<br>
        <span class="fa-stack fa-lg">
          <?= Icon::i('circle stack-2x') ?>
          <?= Icon::i('flag stack-1x inverse') ?>
        </span>
            fa-flag on fa-circle<br>
        <span class="fa-stack fa-lg">
          <?= Icon::i('square stack-2x') ?>
          <?= Icon::i('terminal stack-1x inverse') ?>
        </span>
            fa-terminal on fa-square<br>
        <span class="fa-stack fa-lg">
          <?= Icon::i('camera stack-1x') ?>
          <?= Icon::i('ban stack-2x', ['class' => 'text-danger']) ?>
        </span>
            fa-ban on fa-camera
        </div>
        <div class="col-lg-8">
        <pre><?= Html::encode(<<<CODE
<span class="fa-stack fa-lg">
    <?= Icon::i('square-o stack-2x') ?>
    <?= Icon::i('twitter stack-1x') ?>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
    <?= Icon::i('circle stack-2x') ?>
    <?= Icon::i('flag stack-1x inverse') ?>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
    <?= Icon::i('square stack-2x') ?>
    <?= Icon::i('terminal stack-1x inverse') ?>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
    <?= Icon::i('camera stack-1x') ?><i class="fa fa-camera fa-stack-1x"></i>
    <?= Icon::i('ban stack-2x',['class'=>'text-danger']) ?>
</span>
fa-ban on fa-camera
CODE
            ) ?></pre>
        </div>
    </div>
</div>